<template>
	<div id="Rolepermismange">
		<template>
			<el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 10px;">
				<el-tab-pane label="角色管理" name="first">
					<!-- 调用角色管理组件 -->
					<rolemanagementVue></rolemanagementVue>
				</el-tab-pane>
				<el-tab-pane label="资源管理" name="second">
					<!-- 资源管理组件 -->
					<permismanageVue></permismanageVue>
				</el-tab-pane>
				<!-- 用户管理组件 -->
				<el-tab-pane label="用户管理" name="third">
					<usersmanagementVue></usersmanagementVue>
				</el-tab-pane>
				<!-- 岗位管理组件 -->
				<el-tab-pane label="岗位管理" name="">
					<postmanagementVue></postmanagementVue>
				</el-tab-pane>
				<!-- 角色权限管理 -->
				<el-tab-pane label="角色权限管理" name="">
					<updaterolepermisdetails-vue></updaterolepermisdetails-vue>
				</el-tab-pane>
			</el-tabs>
		</template>
	</div>
</template>

<script>
	import permismanageVue from './permismanage.vue'; //资源管理组件
	import postmanagementVue from './postmanagement.vue'; //岗位资源组件
	import rolemanagementVue from './rolemanagement.vue'; //角色资源组件
	import updaterolepermisdetailsVue from './updaterolepermisdetails.vue';
	import usersmanagementVue from './usersmanagement.vue'; //用户资源组件


	export default {
		name: "Rolepermismange",
		data() {
			return {
				activeName: 'second'
			};
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			}
		},
		components: {
			permismanageVue,
			rolemanagementVue,
			usersmanagementVue,
			postmanagementVue,
			updaterolepermisdetailsVue
		}
	};
</script>

<style>
</style>